<template>
  <v-layout wrap justify-center align-center>
    <v-flex md12 xs12 class="overflow-tab mb-3">
      <v-tabs
        v-model="tab"
        class="pos-abs"
        fixed-tabs
        color="transparent"
        slot="extension"
        @change="onTabClicked"
      >
        <v-tabs-slider color="primary"></v-tabs-slider>
        <v-tab
          v-for="(item, index) in tabItems"
          :key="index"
          :href="`#${item.value}`"
          class="primary--text"
        >
          <span class="title">{{ item.text }}</span>
        </v-tab>
      </v-tabs>
    </v-flex>

    <v-flex md12>
      <v-tabs-items v-model="tab">
        <!-- withdraw -->
        <v-tab-item key="1" value="1">
          <v-layout wrap justify-center>
            <v-flex md12>
              <div class="title">Balance</div>
              <div class="numbers">$: {{ withdraw.balance}}</div>
            </v-flex>

            <v-flex md7>
              <span class="subheading">Please select bank account</span>
              <v-select :items="cardList" v-model="withdraw.account"></v-select>
            </v-flex>

            <v-flex md7>
              <div class="title">Please enter withdrawal amounts.</div>
              <div class="input">
                <v-text-field name="cash" type="number" v-model="withdraw.amount"></v-text-field>
              </div>
              <div class="button">
                <v-btn color="primary" @click="onConfirmClicked">
                  <span>Confirm</span>
                </v-btn>
              </div>
            </v-flex>
          </v-layout>
        </v-tab-item>
        <!-- in transit -->
        <v-tab-item key="2" value="2">
          <v-layout wrap justify-center>
            <!-- <v-flex md12>
              <div class="trading-tab flex-center">
                <div
                  @click="onSelectedTradeTab('My profit')"
                  class="my-profit-tab"
                  :class="{'selected': selectedTradeTab === 'My profit'}"
                >My profit</div>
                <div
                  @click="onSelectedTradeTab('Member profit')"
                  class="member-profit-tab"
                  :class="{'selected': selectedTradeTab === 'Member profit'}"
                >Member profit</div>
              </div>
            </v-flex>-->
            <v-flex md8>
              <v-tabs-items v-model="selectedTradeTab">
                <v-tab-item key="1" value="My profit">
                  <table class="table">
                    <thead>
                      <tr>
                        <th v-for="(item, i) of headers1" :key="item">{{ item }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, i) of missionListAll[0]" :key="i">
                        <td>{{ item.titleEnglish }}</td>
                        <td>{{ getTime(item.createTime) }}</td>
                        <td>$ {{ item.price }}</td>
                        <td>$ {{ item.commission ? item.commission.toFixed(2) : '' }}</td>
                      </tr>
                    </tbody>
                  </table>
                </v-tab-item>
                <v-tab-item key="2" value="Member profit">
                  <ul class="tab-panel-list">
                    <li class="tab-panel-li elevation-1" v-for="(mission, i) in missionListAll[1]">
                      <div class="info-wrapper">
                        <div class="item-name ellipsis">{{ mission.titleEnglish }}</div>
                        <div class="item-name ellipsis">{{ mission.createTime }}</div>

                        <div class="amount-wrapper">
                          <div class="item-profit">
                            <div class="price">
                              <span class="title-color">Commision:</span>
                              {{ mission.price }}
                            </div>
                          </div>
                          <div class="item-profit">
                            <div class="price">
                              <span class="title-color">Level:</span>
                              {{ mission.price }}
                            </div>
                          </div>
                        </div>

                        <!-- <div class="item-actions text-right">
                  <cube-button outline @click="onCancelMission(item.label, mission)">Cancel</cube-button>
                  <cube-button outline @click="onCancelMission(item.label, mission)">Order Upload</cube-button>
                        </div>-->
                      </div>
                    </li>
                  </ul>
                </v-tab-item>
              </v-tabs-items>
            </v-flex>
          </v-layout>
        </v-tab-item>
        <!--  -->
        <v-tab-item key="3" value="3">
          <table class="table">
            <thead>
              <tr>
                <th v-for="(item, i) of headers2" :key="item">{{ item }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) of withdrawList" :key="i">
                <td>{{ getTime(item.createTime) }}</td>
                <td>{{ item.price }}</td>
              </tr>
            </tbody>
          </table>
        </v-tab-item>
      </v-tabs-items>
    </v-flex>
  </v-layout>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Api, Login } from "@/api";
import { forEach } from "lodash";
import { KV } from "@/utils/type";
import { PageOptions, TopupStatusKV, PayMethodKV } from "@/utils/constants";
import { ReqProfitIncome, ReqTaskInfo, ProfitIncome } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
import Cookie from "js-cookie";

declare const $Vue: Vue;

@Component
export default class MyWallet extends Vue {

  private tab: any = '1';
  private selectedTab: string = "Order Complete";
  private dialog: boolean = false;
  private dialogItem: any = {};
  private tabItems: any = [
    {
      text: "Order Complete",
      value: '1'
    },
    {
      text: "In Transit",
      value: '2',
    },
    {
      text: "Withdrawls",
      value: '3',
    },
  ];

  private headers1: Array<string> = [
    'Title',
    'Time',
    'Price',
    'Rewards',
  ];

  private headers2: Array<string> = [
    'Time',
    'Amounts',
  ];

  private getTime(date: string) {
    return getTime(date);
  }
  private amounts: number = 0;

  private withdraw: any = {
    account: "",
    bank: "",
    balance: 0,
    amount: 0,
    payType: 1
  };

  private picker: any = null;

  private cardList: Array<any> = [];


  private selectedBank: any = {};
  private selectedTradeTab: any = 'My profit';
  private tradeTabs: any = [{
    name: "My profit",
    value: '1'
  }, {
    name: "Member profit",
    value: '2',
  },]

  private missionListAll: Array<any> = [];

  private withdrawList: Array<any> = [];

  protected mounted() {
    this.getCreditCardList();
    this.getUserInfo();

    this.getMyMissionList();
    this.getMyBillList();

  }

  private onTabClicked() {

  }

  private onSelectedTradeTab(tab: string) {
    this.selectedTradeTab = tab;
  }

  private onConfirmClicked() {
    if (this.withdraw.amount === "") {
      return alert("Please enter amount");
    }

    if (this.withdraw.amount > this.withdraw.balance) {
      return alert("Amount is larger than your balance");
    }
    this.submitWithdraw();
  }

  private onJoinMissionClicked(item: any) {
    this.joinMission(item);
  }

  private async joinMission(task: any) {
    const params = {
      taskId: task.taskId
    };
    const { data } = await Api.competeOrder.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      task.scalped = true;
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    } else {
      alert(data.message);
    }
  }
  /**
   * 提交提现申请
   */
  private async submitWithdraw() {
    const params: ProfitIncome = {
      incomeType: 2, // 1 充值 2 提现
      userId: Number(Cookie.get('p_userId')),
      amount: this.withdraw.amount,
      payType: this.selectedBank.value,
      paymentNo: this.selectedBank.text,
      currency: 'USD',
    };

    const { data } = await Api.saveProfitIncome.r(params);
    console.log("submitWithdraw", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    this.$router.go(-1);
    if (data.result === 0) {
      //
    } else {
    }
  }

  /**
   * 获取用户余额详情
   */
  private async getUserInfo() {
    const params: any = {
      userId: Cookie.get('p_userId')
    };
    const { data } = await Login.getUserBalance.r();
    console.log("getSingleUserInfo", data);
    if (data.result === 0) {
      this.withdraw.balance = Number(data.data);
    } else {
    }
  }

  /**
   * 获取银行卡列表
   */
  private async getCreditCardList() {
    const params: any = {
      userId: Cookie.get('p_userId'),
      limit: 1000,
      offset: 0,
    };
    const { data } = await Api.getCreditCardList.r(params);
    console.log("getCreditCardList", data);
    if (data.result === 0) {
      // this.cardList = data.data.dataList;
      let list: any = [];
      data.data.dataList.forEach((item: any) => {
        list.push({
          text: item.bankName,
          value: item.bankId,
          cardNumber: item.cardNumber,
          cardMobilePhone: item.cardMobilePhone,
          cardId: item.cardId,
        });
      });
      this.cardList = list;

    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 我的账单
   */
  private async getMyBillList(queryForm?: any) {
    let params: ReqProfitIncome = {
      limit: 1000,
      offset: 0,
      incomeType: 2,
      userId: Number(Cookie.get('p_userId')),
      // checkStatus: 1,
    };
    if (queryForm) {
      params = queryForm;
    }
    const { data } = await Api.getProfitIncomeList.r(params);
    console.log("getMyBillList", data);
    if (data.result === 0) {
      let $data = data.data;
      this.withdrawList = data.data.dataList;
    } else {
      this.withdrawList = [];

    }
  }


  /**
   * 获取我的任务列表
   */
  private async getMyMissionList() {
    const params: any = {
      limit: 1000,
      offset: 0,
      buyerUserId: Number(Cookie.get('p_userId')),
      orderStatusArr: [1, 2, 3, 4, 5]
    };
    const { data } = await Api.getOrderList.r(params);
    console.log("getOrderList", data);
    if (data.result === 0) {
      this.missionListAll[0] = data.data.dataList;
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);

.trading-tab {
  height: 3rem;
  > div {
    width: 6.6rem;
    height: 1.6rem;
    font-size: 0.9rem;
    line-height: 1.6rem;
    border: 1px solid #cdcdcd;
    &.selected {
      background-color: @primary;
      color: white;
    }
  }
  .my-profit-tab {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .member-profit-tab {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left-color: transparent;
  }
}
</style>


